<template>
  <view class="news-details-container">
    <view class="news-content">
      <view class="news-header">
        <text>{{ data.maintitle }}</text>
        <view>
          <text>{{ data.createTime }}</text>
          <text>浏览： {{ data.viewCount }}</text>
        </view>
      </view>

      <view class="news-body">
        <view class="news-details-content">
          <view
            class="news-detail-item"
            v-for="(detail, index) in data.details"
            :key="index"
          >
            <!--  -->
            <text v-if="detail.type === 0" style="margin-bottom:15px">{{
              detail.text
            }}</text>
            <view style="margin-bottom:15px" v-else>
              <u-image
                width="100%"
                height="300rpx"
                :src="detail.imgUrl"
              ></u-image>
            </view>
          </view>
        </view>
        <view class="news-bottom-btn">
          <u-button
            :plain="true"
            hover-class="none"
            shape="circle"
            :custom-style="{
              width: '220rpx',
              color: '#3745eb',
              borderColor: '#3745eb',
            }"
            @click="onClickLike"
          >
            <u-icon name="thumb-up-fill" color="#3745eb"></u-icon>
            赞({{ pressLike }})
          </u-button>
          <u-button
            shape="circle"
            hover-class="none"
            @click="toFeedback"
            :custom-style="{
              width: '220rpx',
              backgroundColor: '#3745eb',
              color: 'white',
            }"
            >意见反馈</u-button
          >
        </view>
      </view>
    </view>

    <!-- <view class="comment-container">
        <u-input v-model="commentValue" type="textarea" :border="false" :height="100" :maxlength="15" :clearable="false" placeholder="请输入你的点评内容"/>
        <u-button
            hover-class="none"
            @click="toFeedback"
            :custom-style="{
              width: '80%',
              backgroundColor: '#3745eb',
              color: 'white',
              margin :'20rpx 60rpx',
              borderRadius: '8rpx'
            }"
            >提交</u-button
          >
          <commentList :list="commentData"/>
    </view> -->
  </view>
</template>

<script>
import commentList from "./components/commentList";
import { getArticleDetail } from "@/api/index";
export default {
  data() {
    return {
      commentValue: "",
      commentData: [{}],
      // 点赞
      pressLike: 0,
      ispress: false,
      articleId: 0,
      // 页面的数据
      //details中的type 0  文本  1图片
      data: {},
    };
  },
  onLoad: function(option) {
    this.articleId = option["articleId"];
  },
  mounted() {
    this.pressLike = Math.floor(Math.random() * (9999 - 1000)) + 1000;
    this.fetchDetailSearch();
  },
  methods: {
    fetchDetailSearch() {
      console.log(this.articleId);
      getArticleDetail(this.articleId).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
    toFeedback() {
      uni.navigateTo({ url: "/pages/user/feedback" });
    },
    onClickLike() {
      let text = "点赞成功！";
      if (this.ispress) {
        text = "你已点赞！";
      } else {
        this.ispress = true;
        this.pressLike += 1;
      }

      uni.showToast({
        title: text,
      });
    },
  },
  components: {
    commentList,
  },
};
</script>

<style lang="scss" scoped>
.news-content {
  padding: 0 30rpx;
  background-color: white;
}
.news-content > .news-header {
  & > text {
    font-size: 28rpx;
    // font-weight: bold;
    line-height: 60rpx;
  }

  & > view > text {
    font-size: 24rpx;
    color: #ccc;
  }

  & > view > text:nth-last-child(1) {
    margin-left: 10rpx;
  }
}

.news-body > .news-bottom-btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  padding: 30rpx 0;
}

//
.news-details-content {
  padding-top: 20px;
}

// 评论
.comment-container {
  padding: 30rpx;
}
</style>
